打開vscode後，就順順建了Buttons.tsx
打上

import React from 'react';
import { Button } from 'primereact/button';
const ButtonCompnent:React.FC = ()=> {
  return (
    <div>
      <Button label="這是按鈕"/>
    </div>
  );
}

export default ButtonCompnent;

後快樂的 npm run start，
嗯...就是一個醜醜的按鈕
才突然想起，沒有介紹一下primereact其實提供很多樣式可以選擇，

import 'primereact/resources/themes/%自選樣式%/theme.css'

(基於職業操守公司東西別帶出來危害社會，還是乖乖從中選一款用)
多了一些很不錯的特效，但label文字看得沒很舒心

微調一下
建一個styles.scss

.btn-label{
    color:#ffffff;
    font-weight: bold;
}

然後讓元件吃這個class

<Button className="btn-label" label="這是按鈕"/>

primereact 提供滿豐富的api，
既然都安裝primeicons就從api裡面挑icon好了，
但只說一樣好像有點太無聊...

不如再添加tooltip好了

先來引用primeicons

import 'primeicons/primeicons.css';

再來添加api

<Button 
        className="btn-label" 
        label="這是按鈕" 
        icon={
          ()=><span className="btn-icon pi pi-gift"/>
        } 
        iconPos="left"
        tooltip="點我沒有禮物"
        tooltipOptions={{
          position:'bottom'
        }}/>

因為背景色是深色，tooltip對話框這樣太不容易辨識，
所以再用css魔改一下吧！

<Button 
        className="btn-label" 
        label="這是按鈕" 
        icon={
          ()=><span className="btn-icon pi pi-gift"/>
        } 
        iconPos="left"
        tooltip="點我沒有禮物"
        tooltipOptions={{
          position:'bottom',
          className:'ttip' //添加class
        }}/>

styles.scss

.ttip{
    margin: 4px;
    .p-tooltip-arrow{
        border-bottom-color: #ffffff;
    }
    .p-tooltip-text{
        background-color: #ffffff;
        color: #000000;
    }
}

好了，來看看結果

再來，原本想說說Forms
後來看看先做一個簡單導航列好了，
讓程式碼不要那麼髒，
明天就先來介紹sidebar 跟 panelmenu 吧

明天見!